Description

Adjust the responsive behavior of the Reports > Reports > People page to prevent premature layout collapse on larger screens when used in half-screen mode. The current implementation appears optimized for smaller laptop viewports, causing the UI to collapse too early on wider displays such as a Mac Studio monitor. This impacts usability when working in split-screen mode, especially for tasks requiring screenshots (e.g., work confirmation letters). The goal is to refine the breakpoint logic without altering the overall page structure or design.

Fixes # (bug list priority medium x.x.x)

Related PRS (if any):

• PR3802
• PR3737 (previous attempt closed due to major layout changes; this PR focuses on minimal adjustments only)

Main changes explained:

• Updated responsive breakpoints to delay layout collapse on wider screens
• Modified flex/container behavior to maintain side-by-side layout in half-screen mode
• Replaced rigid width constraints with flexible sizing (flex-based adjustments)
• Ensured no structural or visual redesign of the existing layout

How to test:

1. Check into the current branch
2. Run npm install and start the project locally
3. Clear site data/cache
4. Log in as admin user
5. Navigate to Reports → Reports → People (or click “R” icon on any profile / via Dashboard → Tasks tab)
6. Resize the browser to half-screen on a large monitor
7. Verify the layout does not collapse prematurely and remains usable for screenshots
8. Compare behavior with the provided video reference
9. Verify layout consistency in dark mode

Screenshots or videos of changes:

• Refer to the provided video for expected behavior alignment

Note:

This PR intentionally avoids major layout changes (as seen in PR3737) and focuses only on improving responsiveness for larger screen environments while preserving the existing UI structure.